<!--
 * @Descripttion: 编码规则管理
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-13 17:18:28
 * @LastEditors: 张文韬
 * @LastEditTime: 2020-10-13 17:18:36
-->
<template>
  <el-card class="box-card">
    <div class="control-box">
      <!-- control 操作区 START -->
      <e-control :search-form-options="formOptions"
                 :search-label-width="searchLabelWidth"
                 :search-refresh-show="true"
                 :btns="btns"
                 :search-show="true"
                 :operation-show="true"
                 @on-search="searchControlHandle"
                 @on-refresh="refreshControlHandle"
                 @change-height="changeControlHeight"
                 @on-insert="insertControlHandle"></e-control>
      <!-- control 操作区 END -->
    </div>
    <div class="table-box">
      <!-- table 数据表格 START -->
      <e-table :data="tableData"
               :columns="columns"
               stripe
               border
               :max-height="tableMaxHeight"
               style="width: 100%"
               :page-show="false"
               @selection-change="changeTableSelectData"
               :current="1">
        <template slot-scope="{scope}"
                  slot="operation">
          <el-button @click="updateTableHandle(scope.row)"
                     type="warning"
                     size="mini"
                     plain>编辑</el-button>
          <el-button @click="deleteTableHandle(scope.row)"
                     type="danger"
                     size="mini"
                     plain>删除</el-button>
        </template>
      </e-table>
      <!-- table 数据表格 END -->
    </div>
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog :title="editDialogTitle"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancelDialogDataHandle"
               width="50%">
      <e-form ref="dialogForm"
              :form-options="editFormOptions"
              :form-label-width="editFormLabelWidth"
              :form-rules="editFormRules"
              :form-data-current="dialogFormCurrent"></e-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="saveDialogDataHandle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </el-card>
</template>

<script>
import eControl from '@/components/e-control'
import eForm from '@/components/e-form'
import { formOptions, btns } from './control'
import columns from './columns'
import { editFormOptions, editFormRules } from './form'
import {
  deleteCodingRule,
  getCodingRuleList,
  updateCodingRule,
  getNumTypeList,
  getPurchaseBranchList,
  addCodingRule
} from '@/api/admin.api'

export default {
  name: 'coding-rules-manager',
  components: {
    eControl,
    eForm
  },
  props: {},
  data () {
    return {
      formOptions,
      searchLabelWidth: '100px',
      btns,
      columns,
      editFormOptions,
      editFormLabelWidth: '100px',
      editFormRules,

      // 编辑框是否展示
      editDialogShow: false,
      // 编辑框类型 0:新增;1:修改;
      editDialogType: 0,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 表格选中数据
      tableSelectData: []
    }
  },
  watch: {},
  computed: {
    // 组合查询条件和分页
    searchData () {
      return { ...this.searchFormData }
      // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
    },
    // 表单实例
    dialogForm () {
      return this.$refs.dialogForm
    },
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight - 160
    },
    // 编辑框标题
    editDialogTitle () {
      return this.editDialogType === 0 ? '新增' : '编辑'
    }
  },
  created () {
    this.init()
  },
  mounted () {},
  methods: {
    /**
     * @functionName init
     * @description 页面初始化
     * @author 张航
     * @date 2020-09-09 08:40:06
     * @version V1.0.0
     */
    init () {
      this.getTableData()
      this.getNumTypesJson()
      this.getPurchaseBranch()
    },
    // 获取编码类型列表后同步到表单选项
    getNumTypesJson() {
      getNumTypeList().then(res => {
        res.map((item, index) => {
          const optionObj = {}
          optionObj.label = item.value
          optionObj.value = item.key
          this.$set(this.formOptions[0].options, index, optionObj)
          this.$set(this.editFormOptions[0].options, index, optionObj)
        })
      })
    },
    // 获取采购分支列表后同步到表单选项
    getPurchaseBranch() {
      getPurchaseBranchList().then(res => {
        res.map((item, index) => {
          for(var key in item){
            const optionObj = {}
            optionObj.value = key
            optionObj.label = item[key]
            this.$set(this.formOptions[3].options, index, optionObj)
            this.$set(this.editFormOptions[3].options, index, optionObj)
          }
        })
      })
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight (height) {
      this.controlHeight = height
    },
    /**
     * @functionName insertControlHandle
     * @description 点击新增按钮
     * @author 张航
     * @date 2020-09-08 17:35:28
     * @version V1.0.0
     */
    insertControlHandle () {
      this.openDialog()
    },
    /**
     * @functionName deleteControlHandle
     * @description 点击删除按钮
     * @author 张航
     * @date 2020-09-08 17:38:28
     * @version V1.0.0
     */
    deleteControlHandle () {
      if (this.checkTableSelectData()) {
        const ids = []
        this.tableSelectData.map(item => {
          if (item && item.id) {
            ids.push(item.id)
          }
        })
        console.log(ids)
        this.deleteTableHandle({ id: ids })
      }
    },
    /**
     * @functionName changeTableSelectData
     * @param {Array} rows 选中数据
     * @description 表格选中数据改变
     * @author 张航
     * @date 2020-09-08 17:52:12
     * @version V1.0.0
     */
    changeTableSelectData (rows) {
      this.tableSelectData = rows
    },
    /**
     * @functionName checkTableSelectData
     * @return {Number} 返回结果
     * @description 方法描述
     * @author 张航
     * @date 2020-09-10 09:58:59
     * @version V1.0.0
     */
    checkTableSelectData () {
      if (this.tableSelectData.length === 0) {
        this.$alert('至少选择一条数据！', '提示', {
          confirmButtonText: '确定'
        })
      }
      return this.tableSelectData.length
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.pageData.pageNum = 1
      this.getTableData()
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    getTableData () {
      getCodingRuleList(this.searchData).then(res => {
        this.tableData = res
      }).catch(()=>{
        this.tableData = []
      })
    },
    /**
     * @functionName updateTableHandle
     * @param {Object} row 当前行数据
     * @description 表格编辑按钮
     * @author 张航
     * @date 2020-09-14 16:43:26
     * @version V1.0.0
     */
    updateTableHandle (row) {
      console.log(row)
      this.dialogFormCurrent = { ...row }
      this.openDialog(1)
    },
    /**
     * @functionName deleteTableHandle
     * @param {Object} row 当前行数据
     * @description 表格删除按钮
     * @author 张航
     * @date 2020-09-14 17:17:06
     * @version V1.0.0
     */
    deleteTableHandle (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = row
        deleteCodingRule(id).then(res => {
          // console.log(res)
          this.dialogForm.handleRefresh()
          this.closeDialog()
          this.refreshPageCurrent()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        })
      }).catch(error => {
        console.log(error)
      })

    },
    /**
     * @functionName openDialog
     * @param {Number} type 编辑框类型;0:新增;1:编辑;
     * @description 打开编辑框
     * @author 张航
     * @date 2020-09-08 11:38:51
     * @version V1.0.0
     */
    openDialog (type = 0) {
      this.editDialogType = type
      this.editDialogShow = true
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    closeDialog () {
      this.editDialogType = 0
      this.editDialogShow = false
    },
    /**
     * @functionName saveDialogData
     * @description 保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:15:14
     * @version V1.0.0
     */
    saveDialogDataHandle () {
      console.log(this.dialogForm.formData)
      this.$refs['dialogForm'].handleValidate((valid) => {
        if (!valid) {
          this.$message({
            message: '请检查表单填写内容',
            type: 'warning'
          })
          return
        }
        if (this.editDialogType === 0) {
          addCodingRule(this.dialogForm.formData).then(res => {
            // console.log(res)
            this.dialogForm.handleRefresh()
            this.closeDialog()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.refreshPageCurrent()
          })
        }
        else if (this.editDialogType === 1)  {
          updateCodingRule(this.dialogForm.formData).then(res => {
            // console.log(res)
            this.dialogForm.handleRefresh()
            this.closeDialog()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.refreshPageCurrent()
          })
        }
      })
    },
    /**
     * @functionName cancelDialogData
     * @description 取消保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:17:11
     * @version V1.0.0
     */
    cancelDialogDataHandle () {
      this.dialogForm.handleRefresh()
      this.dialogFormCurrent = {}
      this.closeDialog()
    }
  }
}
</script>
<style lang="scss">
.box-card {
  margin: 4px;
  height: calc(100vh - 110px);
  .el-card__body {
    padding: 0;
  }
}
.abc-header {
  color: #0000ff;
}
.abc {
  font-weight: bold;
  color: #e53939;
}
.control-box {
  margin-bottom: 10px;
}
</style>
